<template>
  <el-form ref="formRef" :model="form" :rules="rules" :show-message="false" label-width="100px" size="default" label-suffix="：">
    <el-row>
      <el-col :span="24">
        <el-form-item label="上级菜单">
          <el-cascader v-model="form.parentId" clearable :props="cascaderProps" :options="menuOptions" style="width: 100%" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="菜单类型">
          <el-radio-group v-model="form.menuType">
            <el-radio label="0">目录</el-radio>
            <el-radio label="1">菜单</el-radio>
            <el-radio label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="菜单图标">
          <div class="pointer" @click="getIcon">{{ form.icon ? form.icon : "请选择" }}</div>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入菜单名称"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否外链">
          <el-radio-group v-model="form.isFrame">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="路由地址" prop="path">
          <el-input v-model="form.path" placeholder="请输入路由地址"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="显示状态">
          <el-radio-group v-model="form.visible">
            <el-radio label="1">显示</el-radio>
            <el-radio label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="权限标识">
          <el-input v-model="form.permission" placeholder="请输入权限标识"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="组件路径">
          <el-input v-model="form.component" placeholder="请输入组件路径"></el-input>
        </el-form-item>
      </el-col>
<!--      <el-col :span="12">-->
<!--        <el-form-item label="菜单状态">-->
<!--          <el-radio-group v-model="form.status">-->
<!--            <el-radio label="1">正常</el-radio>-->
<!--            <el-radio label="0">停用</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
      <el-col :span="12">
        <el-form-item label="排序">
          <el-input type="number" v-model="form.sortOrder" placeholder="值越小越靠前"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup name="x-form">
import useStore from '@/stores/modules/sys/menu';
const sysMenu = useStore();
const formRef = ref()

import XIcon from "./Icon.vue"

import {reactive, ref, onMounted} from "vue";

const cascaderProps = ref({
  label: "name",
  value: "id",
  checkStrictly: true
})

const form = reactive({
  parentId: -1,
  menuType: "0",
  icon: "",
  name: "",
  isFrame: 1,
  path: "",
  visible: "1",
  permission: "",
  status: "1",
  component: "",
  sortOrder: 0,
})

onMounted(() => {
  getMenuList()
})

const rules = ref({
  name: { required: true, message: '菜单名称不能为空', trigger: 'click'},
  path: { required: true, message: '路由地址不能为空', trigger: 'click'},
})

const menuOptions = ref([])

const getMenuList = () => {
  menuOptions.value = sysMenu.dataList
}

const getIcon = () => {
  const op = Dialog.open(XIcon, "选择图标")
  op.setWidth(800)
  op.autoClose(true)

  op.confirm(c => {
    form.icon = c.getIcon()
  })
}

/**
 * 表单验证
 * @param callback
 * @returns {Promise<void>}
 */
const doValidate = async (callback) => {
  await formRef.value.validate((valid, fields) => {
    if (! valid) {
      let errMsg = Helper.getFirstMessage(fields);
      if (errMsg) {
        Msg.error(errMsg)
      }
      callback(false)
      return
    }

    callback(form)
  })
}

/**
 * 保存
 * @returns {Promise<void>}
 */
const submit = async () => {
  await doValidate(async (form) => {
    if (form == false) {
      return
    }

    if(Array.isArray(form.parentId)) {
      form.parentId = form.parentId[form.parentId.length -1]
    }

    let result = null
    result = form.menuId ? await sysMenu.modify(form) : await sysMenu.add(form)
    if (result) {
      Dialog.close()
    }
  })
}

/**
 * 获取表单数据
 * @param data
 */
const render = (data) => {
  if (! Helper.empty(data)) {

    if(! Helper.empty(data.parentId) && data.parentId > -1) {
      data.parentId = [data.parentId];
    }

    for (let key in data) {
      form[key] = data[key]
    }
  }
}

defineExpose({ render, submit })
</script>

<style scoped lang="less">
.pointer {
  color: #409eff;
  cursor: pointer
}

.pointer:hover {
  text-decoration: underline;
}
</style>
